<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>人体生物钟</title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/app.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">人体生物钟测试</h1>
		</header>
		<div class="mui-content">
			<div id="psiSliders" class="mui-slider">
				<div id="psiSliderItems" class="mui-slider-group">
				</div>
			</div>
		</div>
		
		

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/template.js"></script>
		<script type="text/javascript" src="../js/echarts.common.min.js"></script>
		<script type="text/javascript" src="../js/theme/psi-chart.js"></script>
		
		<script type="text/javascript" src="../js/psi.js"></script>
		<script type="text/javascript" src="../js/calendar.js"></script>
		
		<script type="text/javascript" src="../js/app.js"></script>
		
		<script id="psi-tpl" type="text/html">
			<div id="psi-tip-{{psi.id}}" class="descn">亲爱的{{psi.name}}，您的阳历生日是{{psi.birthday}}，农历生日{{lunar.lYear}}-{{lunar.lMonth}}-{{lunar.lDay}}(肖{{lunar.Animal}})，您已经在美丽的地球上生活了{{life}}天。</div>
			<div id="psi-{{psi.id}}" class="chart"></div>
			<div class="btns">
				<button type="button" class="mui-btn mui-btn-primary" id="pre-btn-{{psi.id}}">上一月</button>
				<button type="button" class="mui-btn mui-btn-danger" id="current-btn-{{psi.id}}">本月</button>
				<button type="button" class="mui-btn mui-btn-primary" id="next-btn-{{psi.id}}">下一月</button>
			</div>
		</script>

		<script type="text/javascript" charset="utf-8">
			var psis = [{
				id: 1,
				name: "刘玖武",
				birthday: "1981-11-20"
			}];
			
			var textStyle = {
				fontSize: 16,
				fontWeight: 'bolder',
				color: '#666'
			};

			function getChartOption(weiPsi, psi) {
				var viewDataStrs = weiPsi.viewDate.format('yyyy-MM-dd').split("-");
				var option = {
					title: {
						text: viewDataStrs[0] + "年" + viewDataStrs[1] + "月",
						textStyle: textStyle
					},
					tooltip: {
						trigger: 'axis',
						formatter: viewDataStrs[1] + '月{b0}日<br/>{a0}: {c0}<br/>{a1}: {c1}<br/>{a2}: {c2}',
						textStyle: {
							fontSize: 12
						}
					},
					legend: {
						data: ['体力', '情绪', '智力']
					},
					toolbox: {
						show: true
					},
					//backgroundColor: "#fff",
					calculable: false,
					grid: {
						'x': 40,
						'x2': 15,
						'y': 35,
						'height': 150
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: weiPsi.xAxisData
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							formatter: '{value}'
						},
						min: -100,
						max: 100,
						splitNumber: 10,
					}],
					series: [{
						name: '体力',
						type: 'line',
						smooth: true,
						data: weiPsi.seriesData.physical
					}, {
						name: '情绪',
						type: 'line',
						smooth: true,
						data: weiPsi.seriesData.sensitive
					}, {
						name: '智力',
						type: 'line',
						smooth: true,
						data: weiPsi.seriesData.intellectual
					}]
				};
				return option;
			}

			function getWeiPsi(psi, viewDate) {
				var weiPsi = new WeiPsi(psi, viewDate);
				weiPsi.seriesData();
				return weiPsi;
			}

			function refreshPsi(chart, psi, viewDate) {
				chart.setOption(getChartOption(getWeiPsi(psi, viewDate), psi));
			}
			var weiPsis = [];
			

			function createChart(psi, viewDate) {
				var weiPsi = getWeiPsi(psi, viewDate);
				weiPsis.push(weiPsi);
				var psiDiv = document.getElementById("slider" + psi.id);
				psiDiv.innerHTML = template('psi-tpl', weiPsi);
				var chart = echarts.init(document.getElementById("psi-" + weiPsi.psi.id), "psi-chart");
				refreshPsi(chart, weiPsi.psi, viewDate);
				document.getElementById('current-btn-' + weiPsi.psi.id).addEventListener('tap', function() {
					var curWeiPsi = weiPsis[weiPsi.psi.id - 1];
					curWeiPsi.viewDate = new Date();
					refreshPsi(chart, curWeiPsi.psi, curWeiPsi.viewDate);
				});
				document.getElementById('pre-btn-' + weiPsi.psi.id).addEventListener('tap', function() {
					var curWeiPsi = weiPsis[weiPsi.psi.id - 1];
					curWeiPsi.viewDate.setMonth(curWeiPsi.viewDate.getMonth() - 1);
					refreshPsi(chart, curWeiPsi.psi, curWeiPsi.viewDate);
				});
				document.getElementById('next-btn-' + weiPsi.psi.id).addEventListener('tap', function() {
					var curWeiPsi = weiPsis[weiPsi.psi.id - 1];
					curWeiPsi.viewDate.setMonth(curWeiPsi.viewDate.getMonth() + 1);
					refreshPsi(chart, curWeiPsi.psi, curWeiPsi.viewDate);
				});
			};

			function renderChart() {
				var psiSliderItems = document.getElementById("psiSliderItems");
				var psiSliderIndicators = document.getElementById("psiSliderIndicators");
				for (idx in psis) {
					var sliderItem = document.createElement("div");
					sliderItem.id = "slider" + (idx * 1 + 1);
					sliderItem.className = "mui-slider-item psi";
					psiSliderItems.appendChild(sliderItem);
				}
				createChart(psis[0], new Date());
			};
			renderChart();
		</script>
	</body>

</html>